<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container" style="margin-top: 0.24rem">
        <div class="box mflex items-center">
          <img src="@/assets/images/invest/score.png" alt="">
          <div class="text">{{ title }}</div>
        </div>
        <img class="line-img" src="@/assets/images/invest/line3.png" alt="">
        <div class="box1"></div>
        <div class="setBox time_style">
          <div class="text1">{{ result }}</div>
        </div>
        <!-- 任务区 -->
        <div class="setBox flex" @click="type_show = true">
          <div class="mflex justify-between items-center flex-1 text2">
            <div class="flex1">{{ gradeData }}</div>
            <div class="s"><van-icon name="arrow" /></div>
          </div>
        </div>

        <van-pull-refresh
          v-model="refreshing"
          :success-text="$t('load.refreshed')"
          @refresh="onRefresh(0)"
          head-height="200"
          v-if="!emptyShow"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            :immediate-check="check"
          >
            <div class="videoLists">
              <ul class="list">
                <li
                  v-for="(item, k) in datalist"
                  :key="k"
                  @click="checkLevel(item)"
                >
                  <div class="pic">
                    <img v-lazy="item.coverUrl"/>
                  </div>
                  <div class="text-wrapper">
                    <div class="nowrap-1">{{ item.name }}</div>
                    <div class="flex justify-between items-center score">
                      <van-rate v-model="item.score" readonly color="#ffcd1e"/>
                    </div>
                    <div class="flex items-center justify-between score-wrapper">
                      <div class="score">{{ $t('page.score') }} {{ item.score }}</div>
                      <div class="like">
                        <span v-if="!item.hasWatch">{{ $t("page4.doc6") }}</span>
                        <span v-else>{{ $t("page.doc4") }}</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="h32"></div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>

      <!-- 等级下来框 -->
      <van-popup v-model="type_show" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          :default-index="defaultIndex"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        />
      </van-popup>
    </template>
  </page-scroll>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      title: this.$t("title.doc45"),
      titleLeft: this.$t("title.doc1"),

      movieList: [],
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      type_show: false, // 下拉开关
      columns: [], // 下拉框数据
      gradeData: "", // 显示等级数据
      levelData: [], // 等级数据
      defaultIndex: 0, // 默认选择
      timer: undefined, //定时器
      result: "", //倒计时显示
    };
  },

  mounted() {
    this.getList();
    this.getLevel();
    this.startTime(); //调用定时器
  },
  beforeDestroy() {
    //页面销毁清除定时器
    clearInterval(this.timer);
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    ...mapMutations(["SET_GEADE"]),
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
       // if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
          this.path_url('/home/view?id=' + item.movieId)
        // } else {
        //   this.$toast(this.$t('new.doc51'))
        // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    countDown() {
      let now = new Date(); // 获取当前时间
      let h = parseFloat(24) - parseFloat(now.getHours() + parseFloat(1));
      let m = 60 - now.getMinutes();
      let s = 60 - now.getSeconds();
      this.result = h + ":" + m + ":" + s;
      return this.result;
    },
    startTime() {
      // 循环执行
      this.timer = setInterval(() => {
        this.countDown();
      }, 1000);
    },

    init() {
      if (this.columns.length > 0) {
        this.gradeData = this.columns[this.defaultIndex];
      }
    },
    // 等级列表
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
          let data = res.data;
          let arr = [];
          data.map((item, index) => {
            if (item.level === this.$store.state.grade) {
              this.defaultIndex = index;
            }
            if(this.$store.state.userData.level>=item.level){
              arr.push(
              `${item.name} ${this.$t("page3.doc70")}(${
                item.incomeDailyUseCount
              }/${item.incomeDailyCount})`
            );
            }

          });
          this.columns = arr;
          this.init();
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 下拉取值
    onConfirm(value, index) {
      this.gradeData = value;
      this.SET_GEADE(index);

      this.type_show = false;
    },
    // 关闭下拉框
    onCancel() {
      this.type_show = false;
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }
      this.$post(this.URL.income.scenter, {
        scoreType: 1,
        page: this.pageSize,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },

    getList() {
      this.$post(this.URL.home.mes_list, { groupKey: "SYSTEM" }).then(
        (res) => {}
      );
    },

    path_url(url, item) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box1 {
  height: 80px;
}

.box.mflex {
  padding-top: 30px;
  padding-left: 30px;

  img {
    width: 19px;
  }

  .text {
    margin-left: 9px;
    font-size: 22px;
    font-weight: 600;
  }
}

.line-img {
  width: 186px;
  height: 5px;
  margin-top: 12px;
  margin-bottom: 20px;
  margin-left: 30px;
}

.watch {
  background: linear-gradient(180deg, #FFFB8D 0%, #FF9204 100%) !important;
  color: #000;
  border-radius: .24rem 0 .24rem !important;
}

/deep/ .head {
  background: rgba(17, 85, 59, .1) !important;
}

.page {
  background: #081715 url("../../assets/images/score-bg.png") no-repeat scroll;
  background-size: 100%;
  min-height: 100vh;
  padding-bottom: 60px;
}

.container {
  //padding-top: 20px;
}

.setBox {
  border-radius: 0.16rem;
  background: url("../../assets/images/invest/time.png") no-repeat;
  background-size: 100% 100%;
  color: var(--COborder3);
  padding: 0 30px;
  height: 70px;
  align-items: center;

  .text1 {
    transform: translateY(7px);
  }

  .text2 {
    transform: translateY(-1px);
  }
}
.time_style {
  line-height: 0.88rem;
  text-align: center;
  font-size: 0.38rem;
  letter-spacing: 0.08rem;
}
.videoLists {
  margin-bottom: 1rem;
  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 48%;
      margin-right: 0rem;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      border: 1px solid rgba(18, 93, 55, .4);
      overflow: hidden;
      position: relative;
      background: #091f1f;
      padding: 8px;
      box-shadow: 2px 6px 6px rgba(0,0,0,.3);

      .nowrap-1 {
        margin-bottom: 8px;
      }

      .text-wrapper {
        margin-top: 8px;
        color: #fff;
      }

      .score-wrapper {
        margin-top: 12px;
        .score {
          color: #06c761;
        }
      }

      .like {
        width: 84px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px 0 8px 0;
        color: #fff;
        background: #02d080;
      }

      .pic {
        position: relative;
        width: 100%;

        img {
          border-radius: 0.16rem 0.16rem 0 0;
          width: 100%;
          height: 170px;
          object-fit: cover;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(270deg,
          #0571fd 0%,
          #7b02fe 100%,
          #7b02fe 100%);
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
